<template>
  <a-sub-menu :key="menuInfo.id"
              v-bind="$props"
              v-on="$listeners">
        <span slot="title">
          <a-icon :type="menuInfo.icon"/><span>{{ menuInfo.title }}</span>
        </span>
    <template v-for="item in menuInfo.children">
      <a-menu-item v-if="!item.children" :key="item.id">
        <span>{{ item.title }}</span>
      </a-menu-item>
      <sub-menu v-else :key="item.key" :menu-info="item"/>
    </template>
  </a-sub-menu>
</template>

<script>
  import SubMenu from './subMenu.vue'
  import { Menu } from 'ant-design-vue'

  export default {
    name: 'SubMenu',
    isSubMenu: true,
    components: {
      SubMenu
    },
    props: {
      ...Menu.SubMenu.props,
      menuInfo: {
        type: Object,
        default: () => ({})
      }
    },
    methods: {}

  }
</script>

<style scoped>

</style>
